<template name="moreMatch">
	<!-- 更多选项比赛列表 -->
	<view class="moreMatch">
		<view class="box">
			<view class="flex-c title">
				<view class="home_name">{{moreDataObj.home_name}}</view>
				<view class="vs">VS</view>
				<view class="away_name">{{moreDataObj.away_name}}</view>
			</view>
			<view class="content">
				<view class="spf">
					<view class="top">
						胜平负/让球
					</view>
					<view class="spfBox">
						<view class="spfMatch flex-bc">
							<view class="spfnum num">
								0
							</view>
							<view class="spfdata flex-c data">
								<view class="flex-c" v-for="(item1,index1) in moreDataObj.bet_data.spf_data.value" :key="index1" :class="item1.status?'active':''"
								 @click="fnSelectData(1,moreDataObj.match_id,index1,item1.status)">
									<text v-if="index1 == 0">胜</text>
									<text v-else-if="index1 == 1">平</text>
									<text v-else>负</text>
									<text>{{item1.val}}</text>
									<view class="single" v-if="index1 == 0 && moreDataObj.bet_data.spf_data.single_status">
										单
									</view>
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.spf_data.available">
									未开售
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.spf_data.available">
									未开售
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.spf_data.available">
									未开售
								</view>
							</view>
						</view>
						<view class="rqspfMatch flex-bc">
							<view class="rqspfnum num" :class="moreDataObj.bet_data.rqspf_data.handicap>0?'red':'blue'">
								{{moreDataObj.bet_data.rqspf_data.handicap}}
							</view>
							<view class="rqspfdata flex-c data">
								<view class="flex-c" v-for="(item2,index2) in moreDataObj.bet_data.rqspf_data.value" :key="index2" :class="item2.status?'active':''"
								 @click="fnSelectData(2,moreDataObj.match_id,index2,item2.status)">
									<text v-if="index2 == 0">胜</text>
									<text v-else-if="index2 == 1">平</text>
									<text v-else>负</text>
									<text>{{item2.val}}</text>
									<view class="single" v-if="index2 == 0 && moreDataObj.bet_data.rqspf_data.single_status">
										单
									</view>
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.rqspf_data.available">
									未开售
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.rqspf_data.available">
									未开售
								</view>
								<view class="flex-c available" v-if="!moreDataObj.bet_data.rqspf_data.available">
									未开售
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="score">
					<view class="top flex">
						<text class="single">单</text>
						<text>比分</text>
					</view>
					<view class="scoreBox">
						<view class="home_win flex-bc">
							<view class="left flex-c">
								<text>主胜</text>
							</view>
							<view class="home_win_socre_data flex">
								<view class="flex-c" v-for="(itemW,indexW) in moreDataObj.bet_data.bfw_data.value" @click="fnSelectData(3,moreDataObj.match_id,indexW,itemW.status)"
								 :class="itemW.status?'active':''">
									<text v-if="indexW == 0">1:0</text>
									<text v-else-if="indexW == 1">2:0</text>
									<text v-else-if="indexW == 2">2:1</text>
									<text v-else-if="indexW == 3">3:0</text>
									<text v-else-if="indexW == 4">3:1</text>
									<text v-else-if="indexW == 5">3:2</text>
									<text v-else-if="indexW == 6">4:0</text>
									<text v-else-if="indexW == 7">4:1</text>
									<text v-else-if="indexW == 8">4:2</text>
									<text v-else-if="indexW == 9">5:0</text>
									<text v-else-if="indexW == 10">5:1</text>
									<text v-else-if="indexW == 11">5:2</text>
									<text v-else>胜其他</text>
									<text>{{itemW.val}}</text>
								</view>
							</view>
						</view>
						<view class="ping flex-bc">
							<view class="left flex-c">
								<text>平</text>
							</view>
							<view class="ping_socre_data flex">
								<view class="flex-c" v-for="(itemW,indexW) in moreDataObj.bet_data.bfd_data.value" @click="fnSelectData(4,moreDataObj.match_id,indexW,itemW.status)"
								 :class="itemW.status?'active':''">
									<text v-if="indexW == 0">0:0</text>
									<text v-else-if="indexW == 1">1:1</text>
									<text v-else-if="indexW == 2">2:2</text>
									<text v-else-if="indexW == 3">3:3</text>
									<text v-else>平其他</text>
									<text>{{itemW.val}}</text>
								</view>
							</view>
						</view>
						<view class="home_fail flex-bc">
							<view class="left flex-c">
								<text>主负</text>
							</view>
							<view class="home_fail_socre_data flex">
								<view class="flex-c" v-for="(itemW,indexW) in moreDataObj.bet_data.bfl_data.value" @click="fnSelectData(5,moreDataObj.match_id,indexW,itemW.status)"
								 :class="itemW.status?'active':''">
									<text v-if="indexW == 0">0:1</text>
									<text v-else-if="indexW == 1">0:2</text>
									<text v-else-if="indexW == 2">0:3</text>
									<text v-else-if="indexW == 3">0:4</text>
									<text v-else-if="indexW == 4">0:5</text>
									<text v-else-if="indexW == 5">1:2</text>
									<text v-else-if="indexW == 6">1:3</text>
									<text v-else-if="indexW == 7">1:4</text>
									<text v-else-if="indexW == 8">1:5</text>
									<text v-else-if="indexW == 9">2:3</text>
									<text v-else-if="indexW == 10">2:4</text>
									<text v-else-if="indexW == 11">2:5</text>
									<text v-else>负其他</text>
									<text>{{itemW.val}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="ballNum">
					<view class="top flex">
						<text class="single">单</text>
						<text>进球数</text>
					</view>
					<view class="ballNumBox flex-bc">
						<view class="left flex-c">
							<text>进球数</text>
						</view>
						<view class="ballNumData flex">
							<view class="flex-c" v-for="(itemW,indexW) in moreDataObj.bet_data.jqs_data.value" @click="fnSelectData(6,moreDataObj.match_id,indexW,itemW.status)"
							 :class="itemW.status?'active':''">
								<text v-if="indexW == 0">0</text>
								<text v-else-if="indexW == 1">1</text>
								<text v-else-if="indexW == 2">2</text>
								<text v-else-if="indexW == 3">3</text>
								<text v-else-if="indexW == 4">4</text>
								<text v-else-if="indexW == 5">5</text>
								<text v-else-if="indexW == 6">6</text>
								<text v-else-if="indexW == 7">7+</text>
								<text>{{itemW.val}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="halfAll">
					<view class="top flex">
						<text class="single">单</text>
						<text>半全场</text>
					</view>
					<view class="halfAllBox flex-bc">
						<view class="left flex-c">
							<text>半全场</text>
						</view>
						<view class="halfAllData flex">
							<view class="flex-c" v-for="(itemW,indexW) in moreDataObj.bet_data.bqc_data.value" @click="fnSelectData(7,moreDataObj.match_id,indexW,itemW.status)"
							 :class="itemW.status?'active':''">
								<text v-if="indexW == 0">胜-胜</text>
								<text v-else-if="indexW == 1">胜-平</text>
								<text v-else-if="indexW == 2">胜-负</text>
								<text v-else-if="indexW == 3">平-胜</text>
								<text v-else-if="indexW == 4">平-平</text>
								<text v-else-if="indexW == 5">平-负</text>
								<text v-else-if="indexW == 6">负-胜</text>
								<text v-else-if="indexW == 7">负-平</text>
								<text v-else-if="indexW == 8">负-负</text>
								<text>{{itemW.val}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="button-group flex-c">
				<view class="button flex-c" @click="cancel()">
					<text class="uni-dialog-button-text">清除</text>
				</view>
				<view class="button uni-border-left flex-c" @click="confirm()">
					<text class="uni-dialog-button-text uni-button-color">确定</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			moreData: {
				type: Object,
				default: function() {
					return {}
				}
			},
			match_data: {
				type: Array,
				default: function() {
					return []
				}
			}
		},
		data() {
			return {
				showMore: false,
				moreDataObj: {},
				match_data_arr: [],
				isSelectMore: [],
				match_id:''
			};
		},
		created() {
			console.log(this.moreData)
			this.moreDataObj = this.moreData
			this.match_data_arr = this.match_data
			this.match_id = this.moreData.match_id
			if(this.findElem(this.moreDataObj.bet_data.bfw_data.value, 'status', true) != -1){
				this.isSelectMore.push(true)
			}
			if(this.findElem(this.moreDataObj.bet_data.bfd_data.value, 'status', true) != -1){
				this.isSelectMore.push(true)
			}
			if(this.findElem(this.moreDataObj.bet_data.bfl_data.value, 'status', true) != -1){
				this.isSelectMore.push(true)
			}
			if(this.findElem(this.moreDataObj.bet_data.jqs_data.value, 'status', true) != -1){
				this.isSelectMore.push(true)
			}
			if(this.findElem(this.moreDataObj.bet_data.bqc_data.value, 'status', true) != -1){
				this.isSelectMore.push(true)
			}
			console.log(this.isSelectMore.length)
		},
		methods: {
			fnSelectData(bet_type, match_id, bet_type_id, status) {
				console.log(bet_type)
				if (!status) {
					var obj1 = {
						'bet_type': bet_type,
						'bet_type_id': bet_type_id
					}
					if (!this.match_data_arr.length) {
						var obj2 = {
							'match_id': match_id,
							'bet_data': [obj1]
						}
						this.match_data_arr.push(obj2)
					} else {
						var hasMatch = this.findElem(this.match_data_arr, 'match_id', match_id)
						// console.log(hasMatch)
						if (hasMatch == -1) {
							// console.log('添加一个新的比赛')
							var obj2 = {
								'match_id': match_id,
								'bet_data': [obj1]
							}
							this.match_data_arr.push(obj2)
						} else {
							this.match_data_arr[hasMatch].bet_data.push(obj1)
						}
					}
					if (bet_type == 3 || bet_type == 4 || bet_type == 5 || bet_type == 6 || bet_type == 7) {
						this.isSelectMore.push(bet_type)
					}
					console.log(this.isSelectMore)
					console.log(this.match_data_arr)
				} else {
					console.log('222')
					// 再次点击删除
					this.match_data_arr.forEach((item, index) => {
						if (item.match_id == match_id) {
							if (item.bet_data.length == 1) {
								this.match_data_arr.splice(index, 1)
							} else {
								// console.log(item.bet_data)
								// console.log(bet_type_id)
								item.bet_data.forEach((item1, index1) => {
									if (item1.bet_type_id == bet_type_id && item1.bet_type == bet_type) {
										console.log(index1)
										item.bet_data.splice(index1, 1)
									}
								})
							}

						}
					})
					if (bet_type == 3 || bet_type == 4 || bet_type == 5 || bet_type == 6 || bet_type == 7) {
						this.isSelectMore.splice(this.isSelectMore.length - 1, 1)
					}
					console.log(this.isSelectMore)
					console.log(this.match_data_arr)
				}
				if (bet_type == 1) { //胜平负
					console.log(this.moreDataObj.bet_data.spf_data.value)
					var spf_data = this.moreDataObj.bet_data.spf_data.value
					spf_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 2) { //让球胜平负
					console.log(this.moreDataObj.bet_data.rqspf_data.value)
					var rqspf_data = this.moreDataObj.bet_data.rqspf_data.value
					rqspf_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 3) { //比分（主胜）
					console.log(this.moreDataObj.bet_data.bfw_data.value)
					var bfw_data = this.moreDataObj.bet_data.bfw_data.value
					bfw_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 4) { //比分（平）
					console.log(this.moreDataObj.bet_data.bfd_data.value)
					var bfd_data = this.moreDataObj.bet_data.bfd_data.value
					bfd_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 5) { //比分（主负）
					console.log(this.moreDataObj.bet_data.bfl_data.value)
					var bfl_data = this.moreDataObj.bet_data.bfl_data.value
					bfl_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 6) { //进球数
					console.log(this.moreDataObj.bet_data.jqs_data.value)
					var jqs_data = this.moreDataObj.bet_data.jqs_data.value
					jqs_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
				if (bet_type == 7) { //半全场
					console.log(this.moreDataObj.bet_data.bqc_data.value)
					var bqc_data = this.moreDataObj.bet_data.bqc_data.value
					bqc_data.forEach((item, index) => {
						if (index == bet_type_id) {
							item.status = !item.status
						}
					})
				}
			},
			cancel() {
				var spf_data = this.moreDataObj.bet_data.spf_data.value
				spf_data.forEach((item, index) => {
					item.status = false
				})

				var rqspf_data = this.moreDataObj.bet_data.rqspf_data.value
				rqspf_data.forEach((item, index) => {
					item.status = false
				})

				var bfw_data = this.moreDataObj.bet_data.bfw_data.value
				bfw_data.forEach((item, index) => {
					item.status = false
				})

				var bfd_data = this.moreDataObj.bet_data.bfd_data.value
				bfd_data.forEach((item, index) => {
					item.status = false
				})

				var bfl_data = this.moreDataObj.bet_data.bfl_data.value
				bfl_data.forEach((item, index) => {
					item.status = false
				})

				var jqs_data = this.moreDataObj.bet_data.jqs_data.value
				jqs_data.forEach((item, index) => {
					item.status = false
				})

				var bqc_data = this.moreDataObj.bet_data.bqc_data.value
				bqc_data.forEach((item, index) => {
					item.status = false
				})

				this.$emit("fnShowMore", this.showMore)
				this.match_data_arr.forEach((item,index)=>{
					if(item.match_id == this.match_id){
						this.match_data_arr.splice(index,1)
					}
				})
				this.$emit("fnGetMatchData", this.match_data_arr)
				console.log(this.match_data_arr)
				this.isSelectMore = []
				var isSelect = {
					"isSelect":this.isSelectMore,
					"match_id":this.match_id
				}
				uni.$emit("isSelect",isSelect)
			},
			confirm() {
				this.$emit("fnShowMore", this.showMore)
				this.$emit("fnGetMatchData", this.match_data_arr)
				var isSelect = {
					"isSelect":this.isSelectMore,
					"match_id":this.match_id
				}
				uni.$emit("isSelect",isSelect)
			},
			findElem(arrayToSearch, attr, val) {
				for (var i = 0; i < arrayToSearch.length; i++) {
					if (arrayToSearch[i][attr] == val) {
						return i;
					}
				}
				return -1;
			}
		}
	}
</script>

<style lang="scss" scoped>
	.moreMatch {
		width: 100%;

		.box {
			border-radius: 20rpx;
			background: #fff;
			width: 100%;
		}

		.title {
			width: 100%;
			padding: 0 20rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			background: #F7F8FC;
			height: 94rpx;
			border-radius: 20rpx 20rpx 0px 0px;
			border-bottom: 1rpx solid #EDF4F9;

			view {
				text-align: center;
				color: #333;
			}

			.home_name {
				flex: 3;
			}

			.vs {
				flex: 1;
				color: #666;
			}

			.away_name {
				flex: 3;
			}
		}

		.content {
			.active {
				background: #F22F29;
				// border: none;
				color: #fff;
			}

			max-height: 1000rpx;
			overflow-y: scroll;
			padding: 40rpx 32rpx;
			box-sizing: border-box;

			view {
				.top {
					color: #666;
					font-size: 30rpx;
					margin-bottom: 30rpx;
					align-items: center;

					.single {
						width: 30rpx;
						height: 30rpx;
						background: #F22F29;
						margin-right: 20rpx;
						display: inline-block;
						font-size: 22rpx;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
					}
				}

				.spfBox {
					margin-bottom: 40rpx;

					view {
						height: 82rpx;

						.num {
							flex: 1;
							font-size: 22rpx;
							color: #666;
							line-height: 82rpx;
							text-align: center;
							border: 1rpx solid #E3E3E3;
							box-sizing: border-box;
						}

						.red {
							color: #FC6655;
						}

						.blue {
							color: #5CA1FC;
						}

						.data {
							flex: 10;
							height: 100%;

							view {
								flex: 1;
								height: 100%;
								border: 1rpx solid #E3E3E3;
								box-sizing: border-box;
								flex-direction: column;
								font-size: 24rpx;
								color: #333;
								position: relative;

								.single {
									position: absolute;
									top: 0;
									left: 0;
									background: #F22F29;
									color: #fff;
									font-size: 20rpx;
									height: 30rpx !important;
									line-height: 30rpx;
									border: none !important;
								}
							}

							.active {
								background: #F22F29;
								// border: none;
								color: #fff;
							}

							.available {
								background: #eee;
							}
						}
					}
				}

				.scoreBox {
					margin-bottom: 40rpx;
					font-size: 24rpx;
					color: #333;

					view {
						.left {
							height: 100%;
							width: 41rpx;
							border: 1rpx solid #E3E3E3;
							font-size: 22rpx;
							text-align: center;
							box-sizing: border-box;
						}
					}

					.home_win {
						height: 246rpx;

						.left {
							color: #F22F29;
						}

						.home_win_socre_data {
							height: 100%;
							flex: 1;
							flex-wrap: wrap;

							view:nth-last-child(1) {
								width: 60%;
							}

							view {
								width: 20%;
								height: 82rpx;
								border: 1rpx solid #E3E3E3;
								box-sizing: border-box;
								flex-direction: column;
							}
						}
					}

					.ping {
						height: 82rpx;

						.left {
							color: #22C538;
						}

						.ping_socre_data {
							height: 100%;
							flex: 1;
							flex-wrap: wrap;

							view {
								width: 20%;
								height: 82rpx;
								border: 1rpx solid #E3E3E3;
								box-sizing: border-box;
								flex-direction: column;
							}

						}
					}

					.home_fail {
						height: 246rpx;

						.left {
							color: #5CA1FC;
						}

						.home_fail_socre_data {
							height: 100%;
							flex: 1;
							flex-wrap: wrap;

							view {
								width: 20%;
								height: 82rpx;
								border: 1rpx solid #E3E3E3;
								box-sizing: border-box;
								flex-direction: column;
							}

							view:nth-last-child(1) {
								width: 60%;
							}
						}
					}
				}

				.ballNumBox,
				.halfAllBox {
					height: 164rpx;
					width: 100%;
					margin-bottom: 40rpx;
					font-size: 24rpx;
					color: #333;

					.left {
						color: #F22F29;
						width: 41rpx;
						height: 100%;
						border: 1rpx solid #E3E3E3;
						box-sizing: border-box;
						font-size: 22rpx;
						text-align: center;
					}

					.ballNumData {
						flex: 1;
						flex-wrap: wrap;

						view {
							width: 25%;
							height: 82rpx;
							border: 1rpx solid #E3E3E3;
							box-sizing: border-box;
							flex-direction: column;
						}
					}
				}

				.halfAllBox {
					height: 246rpx;
					margin: 0;

					.halfAllData {
						flex: 1;
						flex-wrap: wrap;

						view {
							width: 33.3333%;
							height: 82rpx;
							border: 1rpx solid #E3E3E3;
							box-sizing: border-box;
							flex-direction: column;
						}
					}
				}
			}
		}

		.button-group {
			border-top: 1rpx solid #EDF4F9;
			background: #FCFDFF;
			border-radius: 0px 0px 20rpx 20rpx;

			.button {
				flex: 1;
				font-size: 28rpx;
				height: 88rpx;

			}

			.uni-border-left {
				border-left: 1rpx solid #EDF4F9;
			}

			.uni-button-color {
				color: #F22F29;
			}
		}

	}
</style>
